

$(function () {

    // 评论和详细的切换
    $('#pro-des').on("click", function () {
        $(this).addClass("active");
        $('#pro-com').removeClass('active');
        $('.pro-inter').css('display', "block");
        $('.pro-comment').css('display', "none");

    })

    $('#pro-com').on("click", function () {
        $(this).addClass("active");
        $('#pro-des').removeClass('active')
        $('.pro-inter').css('display', "none")
        $('.pro-comment').css('display', "block")
    })


    // 商品点击的增加 .和点击更改数量

    $(".count").on('dblclick', function () {
        let count = $(this).text();
        $(this).html(`<input type="text" value=${count}></input>`);
        let that = $(this)
        $(this).children("input").on('focusout', function () {
            that.text($(this).val());
        })
    })

    $("#add").on('click', function () {
        console.log($(".count"));
        let count = $(".count").text();
        count = Number(count.trim());
        $(".count").text(++count);
    })


    $("#reduce").on('click', function () {
        console.log($(".count"));
        let count = $(".count").text();
        count = Number(count.trim());
        $(".count").text(--count <= 0 ? 0 : --count);
    })



    // 点击颜色分类,改变样式
    $('.color-c>div').on('click', function () {
        $(this).addClass('boxactive').siblings("div").removeClass('boxactive');
    })

    $('.pro-aging>div').on('click', function () {
        $(this).addClass('boxactive').siblings("div").removeClass('boxactive');
    })



    // 点击小图片 ,改变图片
    $('.pro-lbom>div').not("#boxshwo").on('click', function () {

        // 改变图片
        $('.pro-ltop-img>img').prop("src", $(this).find('img').prop("src"))
        // 改变移动框
        // console.log();
        let index = $(this).index() - 1;
        console.log(index);
        // 改变大盒子的图片
        $('#motai-show>img').prop('src', $(this).find('img').prop("src"))
        $("#boxshwo").animate({ "left": 145 * index }, 100)

    })




    // 鼠标移入模态框
    $('.pro-ltop-img').on('mouseenter', function () {
        $("#motai").removeClass('showordis')
        $(this).find("div").removeClass('showordis');
    })

    // 鼠标移除事件
    $('.pro-ltop-img').on('mouseleave', function () {
        $("#motai").addClass('showordis')
        $(this).find("div").addClass('showordis');
    })

    // 鼠标移动事件

    $(".pro-ltop-img").on('mousemove', function (e) {
        // 首先让黄色方块跟着鼠标移动
        // 鼠标位置
        let mx = e.pageX;
        let my = e.pageY;

        // 盒子到上方和左边的的距离
        let offLeft = $(this).offset().left;
        let offTop = $(this).offset().top;

        let bw = $(this).innerWidth()
        let bh = $(this).innerHeight()
        // 盒子的宽高
        let w = $('#motai').innerWidth();
        let h = $('#motai').innerHeight();

        let maskX = mx - offLeft - w / 2
        let maskY = my - offTop - h / 2
        if (maskX <= 0) {
            maskX = 0

        } else if (maskX > bw - w) {
            maskX = bw - w
        }

        if (maskY <= 0) {
            maskY = 0
        } else if (maskY >= bh - h) {
            maskY = bh - h
        }
        $('#motai').css({ "left": maskX, "top": maskY })


        let mw = $('#motai-show>img').innerWidth();
        let mh = $('#motai-show>img').innerHeight();

        // let a = maskX * 450 / bw - w
        // let b = maskY * 450 / bh - h

        // 根据鼠标改变图片的位置
        $('#motai-show>img').css({ "left": -maskX * 1.5, "top": -maskY * 1.5 })




    })



})



